<!--
 * @Author: WangSir 3036970150@qq.com
 * @Date: 2022-11-25 17:21:31
 * @LastEditors: WangSir 3036970150@qq.com
 * @LastEditTime: 2022-12-02 17:01:05
 * @FilePath: \vue_express\src\pages\userInformation\UserInformation.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="UserInfoPage">
      <div class="infoCard">
           <h2>用户信息卡</h2>
           <div class="info">
              <div class="key"><i class="el-icon-user-solid"></i></div>
              <div class="val">{{username}}</div>
           </div>
           <div class="info">
              <div class="key"><i class="el-icon-message"></i></div>
              <div class="val">{{email}}</div>
           </div>
           <!-- <div class="info">
              <div class="key"><i class="el-icon-s-platform"></i></div>
              <div class="val">{{registerTime}}</div>
           </div>
           <div class="info">
              <div class="key"><i class="el-icon-monitor"></i></div>
              <div class="val">{{loginTime}}</div>
           </div> -->
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "UserInformationPage",
    data() {
      return {
        username:'',
        // phone:'',
        // registerTime:'',
        // loginTime:''
        email:''
  
      };
    },
    computed: {},
    components: {},
    created() {},
    mounted() {
     this.getUserInfo()
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      getUserInfo(){
       let user = JSON.parse(sessionStorage.getItem('user'))
       this.username = user.username;
    //    this.phone = user.phone;
    //    this.registerTime = user.registerTime;
    //    this.loginTime = user.loginTime;
        this.email = user.email
      }
    },
  };
  </script>
  <style scoped>
  .UserInfoPage{
     /* border: 1px solid; */
     display: flex;
     justify-content:center;
     align-items: center;
     text-align: center;
  }
  .infoCard{
     width: 400px;
     height:500px;
     border: 1px solid #fff;
     border-radius: 20px;
     /* box-shadow: 2px 5px 10px rgb(154, 207, 233); */
     box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
  }
  h2{
     margin-top:-10px;
  }
  .info{
     display: flex;
     justify-content:space-between;
     align-items: center;
     width: 350px;
  }
  .key{
     font-size: 20px;
     font-weight: bold;
  }
  .val{
     flex:1;
     display: flex;
     justify-content:left;
     align-items:center;
     padding-left: 40px;
  }
  </style>
  